<template>
	<div class="sign-com">
		<div class="sign">
			<view class="jinbi">
				<view class="icon">
					<image class="img" src="/static/img/icon/cion.svg"></image>
				</view>
				<view class="span">{{userInfo.usercion}}</view>
			</view>
			<view @click="handleSign" class="qiandao" v-if="!userInfo.sign">يوقلىما</view>
			<view class="qiandao ok" v-if="userInfo.sign">-تامام</view>
			<view class="text" v-if="!userInfo.sign">يوقلىمىدىن ئۆتۈپ تەڭگىگە ئېرىشىڭ</view>
			<view class="text" v-if="userInfo.sign">بۈگۈن يوقلىمىدىن ئۆتۈپ بولدىڭىز</view>
		</div>
		<view class="lingqu">
			<view class="title">كۈندىلىك يوقلىمىدىن ئۆتۈپ تەڭگىگە ئېرىشىڭ</view>
			<view :class="['li', {'ok':userInfo.signdaily>=1}]">
				<view class="san">
					<div class="did">تامام</div>
					<div class="doing">+2</div>
				</view>
				<view class="name">1-كۈنى</view>
			</view>
			<view :class="['li', {'ok':userInfo.signdaily>=2}]">
				<view class="san">
					<div class="did">تامام</div>
					<div class="doing">+5</div>
				</view>
				<view class="name">2-كۈنى</view>
			</view>
			<view :class="['li', {'ok':userInfo.signdaily>=3}]">
				<view class="san">
					<div class="did">تامام</div>
					<div class="doing">+10</div>
				</view>
				<view class="name">3-كۈنى</view>
			</view>
			<view :class="['li', {'ok':userInfo.signdaily>=4}]">
				<view class="san">
					<div class="did">تامام</div>
					<div class="doing">+15</div>
				</view>
				<view class="name">4-كۈنى</view>
			</view>
			<view :class="['li', {'ok':userInfo.signdaily>=5}]">
				<view class="san">
					<div class="did">تامام</div>
					<div class="doing">+20</div>
				</view>
				<view class="name">5-كۈنى</view>
			</view>
			<view :class="['li', {'ok':userInfo.signdaily>=6}]">
				<view class="san">
					<div class="did">تامام</div>
					<div class="doing">+30</div>
				</view>
				<view class="name">6-كۈنى</view>
			</view>
			<view :class="['li', {'ok':userInfo.signdaily>=7}]">
				<view class="san">
					<div class="did">تامام</div>
					<div class="doing">+100</div>
				</view>
				<view class="name">7-كۈنى</view>
			</view>
		</view>
	</div>
</template>

<script>
	import {
		usersign
	} from '@/api/coin.js'
	export default {
		props: {
			userInfo: {
				type: Object,
				require: true
			},
		},
		methods: {
			async handleSign() {
				const res = await usersign()
				if (res.data.code == 200) {
					// 相当于重新刷新数据
					uni.showToast({
						title: 'مۇۋاپىقىيەتلىك بولدى',
						icon: 'success',
						complete: () => {
							this.$emit('handleRefresh')
						}
					})
				} else {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.sign-com {
		padding: 15px;
		overflow: hidden;
		background-color: #fff;

		.sign {
			height: 60px;
			background-image: linear-gradient(90deg, #0aece7 0%, #5885fb 100%);
			border-radius: 60px;

			.text {
				color: #fff;
				font-size: 12px;
				float: left;
				line-height: 60px;
				height: 60px;
				padding-left: 10px;
			}

			.qiandao {
				height: 50px;
				line-height: 50px;
				color: #1d1d1d;
				background-color: #fff;
				float: left;
				margin-left: 5px;
				border-radius: 40px;
				padding: 0 10px;
				margin-top: 5px;

				&.ok {
					background-color: hsla(0, 0%, 100%, .5);
				}

				&:active {
					opacity: .8;
				}
			}

			.jinbi {
				overflow: hidden;
				float: right;
				color: #fff;

				.span {
					float: right;
					height: 60px;
					line-height: 60px;
					font-size: 20px;
				}

				.icon {
					float: right;
					overflow: hidden;
					width: 30px;
					height: 30px;
					background-color: hsla(0, 0%, 100%, .8);
					border-radius: 50%;
					margin-right: 10px;
					margin-top: 15px;
					margin-left: 10px;

					.img {
						width: 20px;
						height: 20px;
						display: block;
						margin: 5px auto 0;
					}
				}
			}
		}

		.lingqu {
			overflow: hidden;

			.title {
				height: 70rpx;
				line-height: 70rpx;
				direction: rtl;
				margin-bottom: 20rpx;
			}

			.li {
				overflow: hidden;
				float: right;
				direction: rtl;
				text-align: center;
				margin-left: 30rpx;

				&.ok {
					.san {
						background-image: linear-gradient(90deg, #0aece7 0%, #5885fb 100%);

						.doing {
							display: none;
						}

						.did {
							display: block;
						}
					}
				}

				&:nth-last-child(1) {
					margin-left: 0;
				}

				.name {
					font-size: 24rpx;
					line-height: 50rpx;
				}

				.san {
					width: 72rpx;
					height: 72rpx;
					line-height: 70rpx;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, .3);
				}

				.doing,
				.did {
					overflow: hidden;
					color: #fff;
					font-size: 24rpx;
				}

				.did {
					display: none;
				}

				.doing {
					display: block;
				}
			}
		}
	}
</style>